<template>
    <div class="person">
        <h2>{{sum}}</h2>
        <button @click="changeSum()">改变sum的值</button>
        <br/>
        <img v-for="item,index in imgSrc" :src="item" :key="index"/>
        <br/>
        <button @click="addImg">添加图片</button>
   
    </div>

</template>

<script setup lang="ts" name="Person">
import { reactive, ref } from 'vue';
import axios from 'axios';
let sum=ref(0)
function changeSum(){
    sum.value+=1
}
let imgSrc=reactive(["https:\/\/images.dog.ceo\/breeds\/pembroke\/n02113023_2012.jpg"])
function addImg(){
    axios.get("https://dog.ceo/api/breed/pembroke/images/random").then((resp)=>{
        imgSrc.push(resp.data.message)

    })


}


</script>
<!-- 在style标签中，加上scoped属性，则表示当前的样式做作用于当前页面 -->
<style scoped>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
img{
    height: 200px;
    width: 200px;
}
</style>